import React, { Fragment } from 'react';
import { connect } from 'dva';
import { Button, Row, Col } from 'antd';
import { routerRedux } from 'dva/router';
import Result from 'components/Result';
import styles from './style.less';
import { format } from 'path';


@connect(({ testrecord, version, user }) => ({
  formData: testrecord.formData,
  currentUser: user.currentUser,
  versionList: version.list,
}))
export default class Step3 extends React.PureComponent {

  componentDidMount() {
    this.props.dispatch({
      type: 'user/fetchCurrent'
    });
  }

  queryCurrentVersioninListState(){
    let list = this.props.versionList;
    let currentVersion = this.props.formData.version;
    return list.find((v) => {
      return v.id === currentVersion.id;
    });
  }

  toCheckTestCordList = () => {
    this.props.dispatch(routerRedux.push('/testcenter/testrecord'));
  }

  toTest = () => {
    this.props.dispatch(routerRedux.push('/testcenter/testsubmit/info'));
  };

  mapUsers = (users) => {
    if(users){
      users =  users.map((user) => {
        return `${user.realName}(${user.userName})`;
      });
      return users.join('|');
    }else{
      return '';
    }
   
  }

  render() {
    const { formData, currentUser } = this.props;
    const currentVersion = this.queryCurrentVersioninListState();
   
    const information = (
      <div className={styles.information}>
        <Row>
          <Col xs={24} sm={8} className={styles.label}>
            提测项目版本：
          </Col>
          <Col xs={24} sm={16}>
           {formData.project.name} {formData.version.name}
          </Col>
        </Row>
        <Row>
          <Col xs={24} sm={8} className={styles.label}>
            版本预发布日期：
          </Col>
          <Col xs={24} sm={16}>
            {currentVersion.expectVersionReleaseTime}
          </Col>
        </Row>
        <Row>
          <Col xs={24} sm={8} className={styles.label}>
            提测人：
          </Col>
          <Col xs={24} sm={16}>
            {`${currentUser.realName}(${currentUser.userName})`}
          </Col>
        </Row>
        <Row>
          <Col xs={24} sm={8} className={styles.label}>
            验收人：
          </Col>
          <Col xs={24} sm={16}>
           产品：{this.mapUsers(formData.project.pm)} <br/>
           测试：{this.mapUsers(formData.project.tester)}<br/>
          </Col>
        </Row>
       {/*  <Row>
          <Col xs={24} sm={8} className={styles.label}>
            延期天数：
          </Col>
          <Col xs={24} sm={16}>
            <span style={{ color: 'red' }}>3</span>
          </Col>
        </Row>
        <Row>
          <Col xs={24} sm={8} className={styles.label}>
            转账金额：
          </Col>
          <Col xs={24} sm={16}>
            <span className={styles.money}>{data.amount}</span> 元
          </Col>
        </Row> */}
      </div>
    );
    const actions = (
      <Fragment>
        <Button type="primary" onClick={this.toTest}>
          重新提测
        </Button>
        <Button onClick={this.toCheckTestCordList}>
          <a href="">查看提测列表</a>
        </Button>
      </Fragment>
    );
    return (
      <Result
        type="success"
        title="提测成功"
        description="本轮快速测试将在15-30min内完成"
        extra={information}
        actions={actions}
        className={styles.result}
      />
    );
  }
}
